<template>
  <el-dialog v-el-drag-dialog="{ drag: true, full: false, resize: false }" :title="title" :visible="true"
    :close-on-click-modal="false" @close="closeMd" :width="'400px'">
    <el-form :model="fm.ps" :ref="fm.fname" @keyup.enter.native="onSubmit" :label-width="'120px'">
      <el-form-item label="报账项目名称" prop="typeName" :rules="[{ required: true, message: '报账项目名称', trigger: 'blur' }]">
        <el-input style="width: 100%" placeholder="报账项目名称" v-model="fm.ps.typeName"
          :disabled="(myData.obj && myData.obj.isDefault == 1) ? true : false" />
      </el-form-item>

      <!-- <el-form-item
        label="报账角色选择"
        prop="roleIds"
        :rules="[{ required: true, message: '请选择报账角色选择', trigger: 'blur' }]">
        <el-select
          v-model="fm.ps.roleIds"
          style="width: 100%"
          clearable multiple
          placeholder="报账角色选择">
          <el-option
            v-for="it in roleOptions"
            :key="it.id"
            :label="it.name"
            :value="it.id">
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="报账角色选择" prop="roleIds" :rules="[{ required: true, message: '请选择报账角色选择', trigger: 'blur' }]">
        <SelectCascade :dataList="roleOptions" :tipText="'请选择报账角色'" :width="260" :defval="fm.ps.roleIds"
          @selItem="getSeledRole">
        </SelectCascade>
      </el-form-item>

      <el-form-item label="关联金额类型" prop="moneyTypeId"
        :rules="[{ required: true, message: '请选择关联金额类型', trigger: 'blur' }]">
        <el-select v-model="fm.ps.moneyTypeId" style="width: 100%" clearable placeholder="关联金额类型">
          <el-option v-for="it in mTypesOptions" :key="it.id" :label="it.typeName" :value="it.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="fm.sb.load">
          {{ fm.sb.text }}
        </el-button>

        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import SelectCascade from '@/components/SelectCascade';

import * as commonSer from "@/api/services/common.service";
import * as systemSer from "@/api/services/system.service";

export default {
  name: "AdupAccountType",
  directives: { elDragDialog },
  props: { myData: Object },
  components: { SelectCascade },
  data() {
    return {
      title: this.myData.obj ? '修改-报账项目' : '添加-报账项目',

      fm: {
        fname: "adupAccountTypeFm",
        sb: { load: false, text: this.myData.obj ? '修改' : '添加' },
        ps: {
          // 修改id
          updId: '',
          // 金额类型id
          moneyTypeId: '',
          // 角色id数组字符串
          roleIds: [],
          // 报账类型名称
          typeName: "",
        },
      },

      // 角色-选择数据
      roleOptions: [],
      // 关联类型-选择数据
      mTypesOptions: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    /* 关闭弹框 */
    closeMd() {
      this.$emit("myClick", { state: false });
    },
    // 初始化数据
    init() {
      const that = this, ps = that.fm.ps, { type } = that.myData;

      console.log('父组件传入数据', that.myData);

      if (type == 1) {// 添加

      } else if (type == 2) {// 修改
        let o = that.myData.obj;
        // 修改id
        ps.updId = o.id;
        // 报账角色
        ps.roleIds = o.roleIds?.split(',').map(it => it.split('-')[0]) || [];
        // 关联类型
        ps.moneyTypeId = o.moneyTypeId?.id;
        // 类型名称
        ps.typeName = o.typeName;
      }

      // 获取-关联金额类型-选择数据
      commonSer.getMoneyTypeDict().then((res) => {
        that.mTypesOptions = res?.mTypes || [];
      });

      // 获取-报账角色-选择数据
      commonSer.getRoleByDeptId({ deptId: "" }).then((res) => {
        that.roleOptions = res?.data || [];
      });
    },

    // 获取选中-角色数据
    getSeledRole(e) {
      this.U.setFmArr(this.fm.ps.roleIds, e.val);
      console.log(this.fm.ps.roleIds, 'this.fm.ps.roleIds')
      console.log(e.val, ' e.val')
    },

    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);

      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;

          if (!ps.updId) {
            delete ps.updId;

            systemSer.addReimType(ps).then(res => {
              sb.load = false;

              if (res.code !== 1) {
                U.qerror(res.msg);
              } else {
                U.qsuccess(res.msg);

                that.closeMd();
                that.$emit("reloadDg");
              }
            });
          } else {
            systemSer.updateReimType(ps).then(res => {
              sb.load = false;

              if (res.code !== 1) {
                U.qerror(res.msg);
              } else {
                U.qsuccess(res.msg);

                that.closeMd();
                that.$emit("reloadDg");
              }
            });
          }
          setTimeout(() => { sb.load = false; }, 10000);
        }
      });
    },


  },
};
</script>
